<template>
  <div style="padding-top: 20px">
    <!-- <draggable v-model="list" :item-class="'item'" :clone-class="'clone'" :drag-class="'drag'" :tag="'ul'">
      <div v-for="(item, index) in list" :key="index">
        <li  :class="itemClass(item)">
          <span class="handle"></span>
          <span class="text">{{ item }}</span>
          <span class="actions">
            <button @click="removeItem(item)">Remove</button>
          </span>
        </li>
      </div>
    </draggable> -->
    <div style="padding: 20px">
      <el-button type="primary" @click="addsave">保存</el-button>
    </div>
    <div style="display: flex; justify-content: flex-start; min-height: 1080px">
      <div>
        <div style="display: flex; justify-content: space-around">
          <div
            style="width: 120px; text-align: center"
            @click="addPush(0, '名片')"
          >
            <img src="../../../assets/images/profile.jpg" class="imgBox" />
            <div>名片</div>
          </div>
          <div
            style="width: 120px; text-align: center"
            @click="addPush(1, '导航组')"
          >
            <img src="../../../assets/images/profile.jpg" class="imgBox" />
            <div>导航组</div>
          </div>
        </div>
        <!-- 2 -->
        <div
          style="display: flex; justify-content: space-around; margin-top: 50px"
        >
          <div
            style="width: 120px; text-align: center"
            @click="addPush(2, '产品介绍')"
          >
            <img src="../../../assets/images/profile.jpg" class="imgBox" />
            <div>产品介绍</div>
          </div>
          <div
            style="width: 120px; text-align: center"
            @click="addPush(3, '行业案例')"
          >
            <img src="../../../assets/images/profile.jpg" class="imgBox" />
            <div>行业案例</div>
          </div>
        </div>
        <!-- 3 -->
        <div
          style="display: flex; justify-content: space-around; margin-top: 50px"
        >
          <div
            style="width: 120px; text-align: center"
            @click="addPush(4, '服务客户')"
          >
            <img src="../../../assets/images/profile.jpg" class="imgBox" />
            <div>服务客户</div>
          </div>
          <div
            style="width: 120px; text-align: center"
            @click="addPush(5, '关于我们')"
          >
            <img src="../../../assets/images/profile.jpg" class="imgBox" />
            <div>关于我们</div>
          </div>
        </div>
      </div>
      <div class="asclass" style="width: 800px">
        <!-- 组件拖动 -->
        <draggable v-model="uploadList">
          <div
            v-for="(v, index) in uploadList"
            :key="`${v.id}${v.name}`"
            @click="onActive(v)"
          >
            <upload-card
              :uploadType="v.type"
              @onDelete="onDelete(index, v)"
              :key="v.id"
              :upload-data="v.children"
            />
          </div>
        </draggable>
      </div>
      <!-- 右侧属性栏 -->
      <div style="width: 1080px; padding-left: 50px">
        <div v-if="upoadType === 0 && activeUpload.type === 0">
          <div>上传背景图片</div>
          <div>
            <upload-view
              @img="(data) => getimgList1(data, 0)"
              style="margin-top: 30px"
              :value="activeChildren[0] ? [activeChildren[0]] : []"
              @deleteImg="deleteImg(0)"
            ></upload-view>
          </div>
          <div>上传二维码</div>
          <div>
            <upload-view
              @img="(data) => getimgList1(data, 1)"
              style="margin-top: 30px"
              :value="activeChildren[1] ? [activeChildren[1]] : []"
              @deleteImg="deleteImg(1)"
            ></upload-view>
          </div>
        </div>
        <!-- 五个ICON -->
        <div v-if="upoadType === 1 && activeUpload.type === 1">
          <div>设置图标</div>
          <div v-for="(item, index) in activeChildren" :key="`${item}${index}`">
            {{ item }}
            <upload-view
              @img="(data) => getimgList1(data, index)"
              style="margin-top: 30px"
              :value="item ? [item] : []"
              @deleteImg="deleteImg(index)"
            ></upload-view>
          </div>
        </div>
        <!-- 产品介绍 -->
        <div
          v-if="
            [2, 3, 4].includes(upoadType) &&
            [2, 3, 4].includes(activeUpload.type)
          "
        >
          <div>单行列数</div>
          <el-select
            v-model="activeUpload.children.value"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <div>行列数</div>
          <el-input
            v-model="activeUpload.children.input"
            placeholder="请输入行列数"
            style="width: 200px"
          ></el-input>
          <div style="margin-top: 20px">显示设置</div>
          <el-checkbox-group v-model="activeUpload.children.checkedCities">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{
              city
            }}</el-checkbox>
          </el-checkbox-group>
          <div style="margin-top: 20px">标题栏</div>
          <div>
            <el-switch
              v-model="activeUpload.children.istitle"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <div style="margin-top: 20px">查看更多</div>
          <div>
            <div>
              <el-switch
                v-model="activeUpload.children.istitle1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
          </div>
        </div>

        <div v-if="upoadType === 5 && activeUpload.type === 5">
          <!--          <div style="margin-top: 20px">标题</div>-->
          <!--          <div>-->
          <!--            <el-input-->
          <!--              v-model="activeUpload.children.inputTitle"-->
          <!--              placeholder="请输入标题"-->
          <!--              style="width: 200px"-->
          <!--            ></el-input>-->
          <!--          </div>-->
          <div style="margin-top: 20px">标题栏</div>
          <div>
            <el-switch
              v-model="activeUpload.children.istitle"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <div style="margin-top: 20px">查看更多</div>
          <div>
            <div>
              <el-switch
                v-model="activeUpload.children.istitle1"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import uploadView from "../../../components/ImageUpload";
import uploadCard from "./components/card.vue";
import { pagesConfig, pagesConfigDetail } from "@/api/addming";
export default {
  components: {
    draggable,
    uploadView,
    uploadCard,
  },
  computed: {
    activeChildren() {
      return this.uploadList.find((v) => v.id === this.activeUpload.id)
        .children;
    },
  },
  mounted() {
    this.getDetail();
  },
  data() {
    return {
      tableData: [],
      uploadLabel: [
        "名片",
        "导航组",
        "产品介绍",
        "行业案例",
        "服务客户",
        "关于我们",
      ],
      uploadList: [],
      //1.封面 2.标题 3.描述 4.标题栏目 5.查看更多
      childMap: [
        {
          value: 1,
          label: "封面",
        },
        {
          value: 2,
          label: "标题",
        },
        {
          value: 3,
          label: "描述",
        },
        {
          value: 4,
          label: "标题栏目",
        },
        {
          value: 5,
          label: "查看更多",
        },
      ],
      activeUpload: {
        id: "",
        name: "",
        type: "",
        children: null,
      },
      upoadType: -1,
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
      ],
      checkedCities: ["封面"],
      cities: ["封面", "标题", "描述"],
    };
  },
  watch: {
    activeUpload: {
      handler(newPro) {
        console.log(newPro);
        if ([2, 3, 4, 5].includes(newPro.type)) {
          this.uploadList = this.uploadList.map((v) => {
            return {
              ...v,
              children:
                this.activeUpload.id === v.id ? newPro.children : v.children,
            };
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    itemClass(item) {
      return {
        item: true,
        "is-active": this.list.indexOf(item) === this.activeIndex,
      };
    },
    // ICON图片
    getimgList1(data, index) {
      console.log("图片路径1", data, this.activeUpload);
      // 带优化
      this.uploadList = this.uploadList.map((v) => {
        const member = v.children;
        if (this.activeUpload.id === v.id) {
          this.$set(member, [index], data[0].url);
        }
        return {
          ...v,
          children: member,
        };
      });
    },
    /**
     * 删除图片
     */
    deleteImg(index) {
      this.uploadList = this.uploadList.map((v) => {
        const member = v.children;
        if (this.activeUpload.id === v.id) {
          this.$set(member, [index], null);
        }
        return {
          ...v,
          children: member,
        };
      });
    },
    // 新增
    addPush(type, name) {
      // if(){
      //   return
      // }
      this.upoadType = type;
      const count = this.uploadList?.[this.uploadList.length - 1]?.id ?? 0;
      let children = [];
      if (type === 1) {
        children = [, , , , ,];
      } else if ([2, 3, 4].includes(type)) {
        children = {
          value: "",
          input: "",
          checkedCities: ["封面"],
          istitle: false,
          istitle1: false,
        };
      } else if (type === 5) {
        children = {
          istitle: false,
          istitle1: false,
        };
      }
      this.uploadList.push({
        id: count + (Math.random() * 100).toFixed(0),
        name: name,
        type: type,
        children,
      });
    },

    /**
     * 删除某个元素
     * @param index
     */
    onDelete(index, item) {
      console.log(this.uploadList.length === 1);
      if (item.id === this.activeUpload.id || this.uploadList.length === 1) {
        Object.assign(
          this.activeUpload,
          this.$options.data.call(this).activeUpload
        );
        this.upoadType = -1;
      }
      this.uploadList.splice(index, 1);
    },
    /**
     * 选中元素
     * @param item
     */
    onActive(item) {
      this.upoadType = item.type;
      this.$set(this.activeUpload, "id", item.id);
      this.$set(this.activeUpload, "name", item.name);
      this.$set(this.activeUpload, "type", item.type);
      this.$set(this.activeUpload, "children", item.children);
    },
    async getDetail() {
      const res = await pagesConfigDetail();
      const ret = res?.data?.sort((a, b) => a.sortNum - b.sortNum);
      this.tableData = ret;
      this.uploadList = ret?.map((item) => {
        const params = {
          id: item.componentInfoId,
          type: item.type - 1,
          principalName: item.principalName,
        };
        const length = item?.settingCategoryList?.length - 1;
        const setLength = length > -1 ? length : 0;
        if (item.type === "1") {
          params.children = [
            item.settingCategoryList?.[0]?.imageSettingList?.[0]?.url ?? "",
            item?.employeeInfoResponse?.qrcodeUrl ?? "",
          ];
        } else if (item.type === "2") {
          params.children = item.settingCategoryList?.[
            setLength
          ]?.imageSettingList.map((j) => j?.url);
        } else if (["3", "4", "5"].includes(item.type)) {
          const displaySettingList =
            item.settingCategoryList?.[setLength]?.displaySettingList;
          params.children = {
            value:
              item.settingCategoryList?.[0]?.listSettingList?.[0]?.colNum ?? "",
            input:
              item.settingCategoryList?.[0]?.listSettingList?.[0]?.rowNum ?? "",
            checkedCities: this.cities.filter((j, index) =>
              displaySettingList?.map((m) => m.type === index + 1)
            ),
            istitle:
              displaySettingList?.find((k) => k.type === "4")?.status === "1",
            istitle1:
              displaySettingList?.find((k) => k.type === "5")?.status === "1",
          };
        } else if (item.type === "6") {
          const displaySettingList =
            item.settingCategoryList?.[setLength]?.displaySettingList;
          params.children = {
            istitle:
              displaySettingList?.find((k) => k.type === "4")?.status === "1",
            istitle1:
              displaySettingList?.find((k) => k.type === "5")?.status === "1",
          };
        }
        return params;
      });
      console.log(this.uploadList);
    },
    addsave() {
      console.log("addsave", this.uploadList);
      const tableList = this.tableData.map((v) => v.componentInfoId);
      const member = this.uploadList.map((item, index) => {
        const params = {
          sortNum: index,
          type: item.type + 1,
          principalName: this.uploadLabel[item.type],
        };
        if (tableList.includes(item.id)) {
          params.componentInfoId = item.id;
        }
        if (item.type === 0) {
          params.employeeInfoResponse = {
            qrcodeUrl: item?.children?.[1] ?? "",
          };
          params.settingCategoryList = [
            {
              imageSettingList: [
                {
                  url: item?.children?.[0] ?? "",
                  type: 1,
                  name: item?.children?.[0] ?? "",
                },
              ],
            },
          ];
        } else if (item.type === 1) {
          const names = [
            "存入通讯录",
            "名片夹",
            "立即联系",
            "分享名片",
            "签署合同",
          ];
          params.settingCategoryList = [
            {
              imageSettingList: item.children.map((v, index) => {
                return {
                  url: v || "",
                  type: 2,
                  name: names[index],
                };
              }),
            },
          ];
        } else if ([2, 3, 4].includes(item.type)) {
          //1.封面 2.标题 3.描述 4.标题栏目 5.查看更多
          const displaySettingList = this.childMap.map((y) => {
            const isValue = item.children.checkedCities.includes(y.label)
              ? 1
              : 0;
            const isTitle = item.children.istitle ? 1 : 0;
            const isMore = item.children.istitle1 ? 1 : 0;
            const isFirst = [1, 2, 3].includes(y.value);
            return {
              type: y.value,
              status: isFirst ? isValue : y.value === 4 ? isTitle : isMore,
            };
          });
          const listSettingList = [
            {
              colNum: item.children?.value ?? "",
              rowNum: item.children?.input ?? "",
            },
          ];
          params.settingCategoryList = [
            {
              displaySettingList,
              listSettingList,
            },
          ];
        } else if (item.type === 5) {
          params.settingCategoryList = [
            {
              displaySettingList: [
                {
                  type: 4,
                  status: item.children.istitle ? 1 : 0,
                },
                {
                  type: 5,
                  status: item.children.istitle1 ? 1 : 0,
                },
              ],
            },
          ];
        }
        return params;
      });
      console.log("addsave", member);
      const cloned = this.tableData
        .filter(
          (k) =>
            !member.map((v) => v.componentInfoId).includes(k.componentInfoId)
        )
        .map((v) => {
          return {
            ...v,
            deleted: 1,
          };
        });
      console.log("addsave", cloned);
      const configList = cloned ? [...member, ...cloned] : member;
      pagesConfig(configList).then((res) => {
        this.$message.success("保存成功");
        setTimeout(() => {
          this.getDetail();
        }, 100);
      });
    },
  },
};
</script>

<style>
.item {
  /* display: flex;
  align-items: center;
  padding: 10px; */
  cursor: move;
  //transition: background-color 0.5s #eee;
}

.item.is-active {
  background-color: #f5f5f5;
}

.clone {
  opacity: 0.5;
}

.drag {
  opacity: 0.5;
  background-color: #ccc;
}

.handle {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-color: #ccc;
  cursor: move;
}

/* ________ */
.imgBox {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.disflex {
  display: flex;
  justify-content: flex-start;
}
.indexFont {
  font-size: 12px;
  margin-left: 15px;
}
.asclass {
  width: 100%;
  padding: 30px;
  background: #eee;
}
.imgBox1 {
  width: 30px;
  height: 30px;
}
.isImag {
  width: 200px;
  height: 100px;
  border-radius: 5px;
}
.title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 20px;
}
.isImag2 {
  width: 130px;
  height: 130px;
}
.isImag3 {
  width: 60px;
  height: 60px;
}
.deldiv {
  background-color: red;
  color: #fff;
  width: 50px;
  height: 20px;
  line-height: 20px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  float: right;
}
.indexBack {
  border-radius: 10px;
  padding: 20px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
